{% extends 'base.html' %}
{% load custom_filters %}
{% block title %}商品详情页{% endblock %}
{% block header %}{% include 'include/_header.html' %}{% endblock %}
{% block link %}
  <link rel="stylesheet" href="/static/css/commodity/detail.css">{% endblock %}
{% block js %}
  <script src="/static/js/commodity/detail.js"></script>{% endblock %}
{% block content %}
  <main id="main">
    {% csrf_token %}
    <div class="layui-container"> <!--实现页面内容居中，两边留白-->
      <!--商品信息 start-->
      <div class="product-info">
        <!--商品图片 start-->
        <div class="infoimg" id="infoimg">
          <div class="mainImg" id="largePicDiv">
            <img id="largePic"
                 src="{{ commodity.cover_picture }}"
                 alt="宝贝">
            <div class="zoom_pup" id="move"></div>
            <div id="detailPic" class="big_pic">
              <img
                src="{{ commodity.cover_picture }}"
                alt="宝贝">
            </div>
          </div>
          <div class="allImg" id="allImg">
            {% for img in commodity_show_imgs %}
              <img src="{{ img.src }}"
                   alt="宝贝">
              <!--<img src="https://img.alicdn.com/imgextra/i1/1136681585/TB26CMHjZtnpuFjSZFKXXalFFXa_!!1136681585.jpg"
                   alt="宝贝">
              <img src="https://img.alicdn.com/imgextra/i1/1136681585/TB2z5MRj5pnpuFjSZFIXXXh2VXa_!!1136681585.jpg"
                   alt="宝贝">
              <img src="https://img.alicdn.com/imgextra/i3/1136681585/TB2jtw6jYxmpuFjSZJiXXXauVXa_!!1136681585.jpg"
                   alt="宝贝">
              <img src="https://img.alicdn.com/imgextra/i1/1136681585/TB2sORxHXuWBuNjSszbXXcS7FXa_!!1136681585.jpg"
                   alt="宝贝">-->
            {% endfor %}

          </div>
        </div>
        <!--商品图片 end-->
        <!--商品选项 start-->
        <div class="product-option">
          <h3 id="product-title">{{ commodity.title }}</h3>
          <h4 id="product-subtitle">{{ commodity.subtitle }}</h4>
          <div class="product-meta">
            <span class="product-name">价格</span>
            <em class="product-price">¥ 66-100</em>
          </div>
          <ul class="option-item" id="option-item">
            <li>
              <span class="product-name">颜色分类</span>
              <ul class="options">
                <li>
                  <img
                    src="//img.alicdn.com/imgextra/i3/1136681585/O1CN01JMTpHq1NZyKKiMZkJ_!!1136681585.jpg_40x40q90.jpg"
                    alt="安梦薄垫4cm厚">
                </li>
              </ul>
            </li>
            <li>
              <span class="product-name">适用床尺寸</span>
              <ul class="options">
                <li>90*190cm【12天发货】</li>
                <li>90*200cm</li>
                <li>120*190cm</li>
                <li>180*200</li>
              </ul>
            </li>
          </ul>
          <div class="product-num">
            <span class="product-name">数量</span>
            <span>
                        <input type="number" value="1" class="by-num">件（库存<span class="inventory">2</span>件）
                    </span>
          </div>
          <div class="product-btn">
            <button class="layui-btn layui-btn-warm shopping-btn">立即购物</button>
            <button class="layui-btn layui-btn-danger shopping-car-btn">
              <i class="layui-icon layui-icon-cart"></i>
              加入购物车
            </button>
          </div>
        </div>
        <!--商品选项 end-->
      </div>
      <!--商品信息 end-->
      <!--商品详情 start-->
      <div class="product-detail">
        <div class="layui-tab layui-tab-card"><!--复制选项卡--卡片风格的Tab-->
          <ul class="layui-tab-title">
            <li class="layui-this">宝贝详情</li>
            <li>评论</li>
          </ul>
          <div class="layui-tab-content">
            {% for img in commodity_detail_imgs %}
              <div class="layui-tab-item layui-show">
                <div class="detail-img" id="detail-img">
                  <img src="{{ img.src }}" style="width: 750px;"
                       alt="宝贝">
                </div>
              </div>
            {% endfor %}
            <!--<div class="layui-tab-item">2</div>-->
          </div>
        </div>
      </div>
      <!--商品详情 end-->
    </div>
  </main>
{% endblock %}

{% block footer %}{% include 'include/_footer.html' %}{% endblock %}